<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style type="text/css">
			html,body{
				background-color: transparent !important; height:100%;
			}
			.info_box{ position: fixed; left: 0; bottom: 0; width:100%;  box-sizing: border-box; padding: 0; z-index: 12;}
			.btn01{ display:block; border: 0;  width: 100%; height: 50px; font-size: 15px; color: #666;}
			.info_box .pay_btn .pay_btn01 button { position: relative; }
			.info_box .pay_btn .pay_btn01 button:not(:last-child)::after{display:block; position: absolute; content: ""; left: 0; right: 0; bottom: 0; height: 1px; background-color: #dedede; overflow: hidden; transform: scaleY(0.5); -webkit-transform: scaleY(0.5);}
			.btn{ display:block; border: 0; background-color: #7dc3e8; width: 100%; height: 44px; font-size: 15px; color: #fff; border-radius: 4px;}

			.a-active { color:#3262F1 !important; }
			.pay_btn{ padding: 0 15px 10px;}
			.pay_btn01 { border:0;background-color:#fff; box-sizing: border-box; border-radius: 4px;overflow:hidden;}
			.pay_btn .btn{ background-color:#fff; color:#666; font-size:15px;}
			.btn02{ background-color:#fff; color:#666 !important; font-size:15px;}
			
			.pay_nums_list { padding: 0 15px; }
			.pay_nums_list li{ position: relative; }
			.pay_nums_list li::after{ display:block; position: absolute; content: ""; left: 0; right: 0; bottom: 0; height: 1px; background-color: #dedede; overflow: hidden; transform: scaleY(0.5);}
			.pay_nums_list img{ width:25px; margin-right: 12px;}
			.pay_nums_list h4{ display:block; font-size: 15px; color: #333; font-weight: 400; line-height: 50px;}
			.pay_nums_list i{ font-size:13px;}
			.pay_nums_list li.on{ background:url(../../image/img_25.png) no-repeat right center; background-size: 14px auto;}

		</style>
	</head>
	<body>
		<div id="filter" style="height:100%;">
		
		<!--完善信息弹窗start-->
		<div class="info_box" id="content">
			<div class="pay_btn">
				<div class="pay_btn01 pay_nums_list">
					<ul id="btnslist">
						<li class="on" tapmode data-paytype="wechat" onclick="selPay(this);">
							<div class="m_cell_hd"><img src="../../image/img_wx.png" /></div>
							<div class="m_cell_ft m_cell_primary"><h4>微信支付</h4></div>
						</li>
						<li tapmode data-paytype="alipay" onclick="selPay(this);">
							<div class="m_cell_hd"><img src="../../image/img_alipay.png" /></div>
							<div class="m_cell_ft m_cell_primary"><h4>支付宝</h4></div>
						</li>
						<li tapmode data-paytype="union" onclick="selPay(this);">
							<div class="m_cell_hd"><img src="../../image/img_union.png" /></div>
							<div class="m_cell_ft m_cell_primary"><h4>银联支付</h4></div>
						</li>
					</ul>
				</div>
			</div>
			<div class="pay_btn">
			  <button class="btn btn02" tapmode onclick="">立即支付</button>
			</div>
		</div>
		<!--完善信息弹窗end-->
		
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/app.js" ></script>
	<script type="text/javascript">
		var fromfrm;
		var winfrm = 0; 
		apiready = function() {
			api.parseTapmode();
			//点击空白处移除Frame
			
			fromfrm = api.pageParam.fromfrm;
			winfrm = api.pageParam.winfrm;
			var myDiv = document.getElementById("filter");
			myDiv.addEventListener("touchstart",function(){
				api.setFrameAttr({
					name: api.frameName,
					hidden: true
				});
				//api.closeFrame({
					//name: api.frameName
				//});
				
			});
			var myDiv1 = document.getElementById("content");
			myDiv1.addEventListener("touchstart",function(event){
				event=event||window.event;
				event.stopPropagation();
			});
		}
		function execfun(obj,fun) {
			if(fun != '')
			{
				if(winfrm == 1)
				{
					api.execScript({
						name: fromfrm+'_win',
						frameName: fromfrm+'_frm',
						script: fun
					});
				}
				else
				{
					api.execScript({
						name: fromfrm+'_win',
						script: fun
					});
				}
			}
			var liList = document.getElementById("btnslist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on')
			}
			$api.toggleCls(obj,'on');
			//closeframe();
		}
		function selPay(obj) {
			
			var paytype = $api.attr(obj,'data-paytype');
			var liList = document.getElementById("btnslist").children;
			for (var i = 0; i < liList.length; i++) {
				$api.removeCls(liList[i], 'on')
			}
			$api.addCls(obj,'on');
			
		}
		//渲染数据
		function UpdateList(domId,templateId,jsondata,isAppend) {
			//console.log(JSON.stringify(jsondata));
			var act_content = $api.byId(domId);
			var tempFn = doT.template($api.byId(templateId).innerHTML);
			var resultText = tempFn(jsondata);
			//alert(isAppend);
			console.log(resultText);
			if(isAppend)
			{
				$api.append(act_content, resultText);
			}
			else
			{
				$api.html(act_content, resultText);
			}
			api.parseTapmode();
		}
		function closeframe() {
			api.closeFrame({
				name: 'actionsheet_frm'
			});
		}
	</script>
</html>